import TinyReact from './TinyReact'

const virtualDOM = (
  <div className="container">
    <h1>你好 Tiny React</h1>
    <h2 data-test="test">(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察: 这个将会被改变)</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段内容</span>
    <button onClick={() => alert("你好")}>点击我</button>
    <h3>这个将会被删除</h3>
    2, 3
    <input type="text" value="13" />
  </div>
)

const modifyDOM = (
  <div className="container">
    <h1>你好 Tiny React123131</h1>
    <h2 data-test="test">(编码必杀技)</h2>
    <div>
      嵌套1 <div>嵌套 1.1</div>
    </div>
    <h3>(观察: 这个将会被改变)</h3>
    {2 == 1 && <div>如果2和1相等渲染当前内容</div>}
    {2 == 2 && <div>2</div>}
    <span>这是一段内容</span>
    <button onClick={() => alert(123123)}>点击我</button>
    {/* <h6>这个将会被删除</h6>
    2, 3 */}
    <input type="text" />
  </div>
)
const app = document.querySelector('#app')

// TinyReact.render(virtualDOM, app)

// setTimeout(() => {
//   TinyReact.render(modifyDOM, app)
// }, 2000)

const Heart = (props) => <div><Demo title={props.msg}/><span>&hearts;</span></div>

// console.log(object)<Heart msg="hello react"/>

class Demo extends TinyReact.Component {

  constructor (props) {
    super(props)
  }

  render () {
    return (
      <div>
        {this.props.title}
      </div>
    )
  }

}

class Alert extends TinyReact.Component {
  
  constructor (props) {
    super(props)
    this.state = {
      number: 0
    }
    this.hanlder = this.hanlder.bind(this)
  }

  hanlder () {
    const { number } = this.state
    this.setState({
      number: number + 1
    })
  }

  render () {
    return (
      <div>
        {this.state.number}
        <button onClick={this.hanlder}>change</button>
      </div>
    )
  }

}

// TinyReact.render(<Demo title="我是props属性"/>, document.querySelector('#app'))

TinyReact.render(<Alert/>, document.querySelector('#app'))